<template>
  <div class="jfmall">
    <div class="title border-bottom">
      积分商城
      <div class="search_icon" @click="search_page"></div>
    </div>
    <div class="jsListScroll" ref="jsListScroll" v-loading="loading">
      <jfList :jfListData="jfList"></jfList>
    </div>
    <tabMenu></tabMenu>
  </div>
</template>

<script>
import wx from 'weixin-jsapi'
import {JfModel} from '../models/jfmallModel.js'
let jfModel=new JfModel()
import BScroll from 'better-scroll'
import jfList from '../components/jfList.vue'
import TabMenu from '@/components/tabMenu.vue'  
export default {
  name:'jfmall',
  data(){
    return {
      jfList:{},
      loading:false
    }
  },
  components:{
    jfList,TabMenu   
  },
  props:{
       
  },
  created(){
    this.loading=true
    jfModel.getJfgoods().then(res=>{
      this.jfList=res.data
      this.loading=false
    })
  },
  mounted(){
    this.creatScroll()
    
  },
  methods:{
    creatScroll(){
      this.$nextTick(() => {
        if(!this.scroll){
          this.scroll=new BScroll(this.$refs.jsListScroll,{scrollX: false,scrollY: true,click:true})
          this.scroll.scrollTo(0,1)//解决多个v-for vue-lazyload失效问题
        }else{
          this.scroll.refresh()
        }
      })
    },
    search_page(){
      this.$router.push('/search_page')
    }
  }
}

</script>

<style lang="stylus" scoped>
.title{width: 100%;height: 50px;line-height: 50px;background: #fff;position: relative;z-index: 2;font-size:16px;color:#363636;text-align:center;}
.search_icon{position:absolute;right:0;top:0;width:50px;height:50px;line-height:50px;background:url("~@/assets/images/search_ico.png") no-repeat center center;z-index:2;background-size:40%;}
.jsListScroll{width:100%;overflow:hidden;position:absolute;right:0;top:50px;left:0;bottom:50px;z-index:1;}

</style>